<!-- 动态表单渲染组件 -->
<template>
  <a-form-item
    :label="name"
    field="oneValue"
    validateTrigger="blur"
    label-align="left"
    show-colon
    :rules="[
      {
        required: true === props.required || Number(props.required) === 1,
        validator,
      },
    ]"
  >
    <!-- 单行文本 -->
    <a-input
      v-if="componentType === 'TEXT'"
      :placeholder="getProps?.placeholder"
      allow-clear
      :max-length="getProps?.textMax"
      show-word-limit
      v-model:props="getProps"
      v-model="oneValue"
      :disabled="disabled"
    />
    <!-- 编号通用 -->
    <a-input
      v-if="componentType === 'NUMBER-UNIVERSAL'"
      :placeholder="getProps?.placeholder"
      allow-clear
      :max-length="getProps?.textMax"
      show-word-limit
      v-model="oneValue"
      disabled
    />

    <!-- 名称通用 -->
    <a-input
      v-if="componentType === 'NAME-UNIVERSAL'"
      :placeholder="getProps?.placeholder"
      allow-clear
      :max-length="getProps?.textMax"
      show-word-limit
      v-model="oneValue"
      disabled
    />

    <!-- 多行文本 -->
    <a-textarea
      v-if="componentType === 'TEXT_AREA'"
      :placeholder="getProps?.placeholder"
      :max-length="getProps?.textMax"
      show-word-limit
      auto-size
      allow-clear
      v-model="oneValue"
      :disabled="disabled"
    />

    <!-- 数字文本 -->
    <a-input-number
      :min="1"
      v-if="componentType === 'NUMBER'"
      :placeholder="getProps?.placeholder"
      :max-length="getProps?.textMax"
      show-word-limit
      auto-size
      allow-clear
      v-model="oneValue"
      :disabled="disabled"
    />

    <!-- 金额文本 -->
    <div
      :style="{
        width: '100%',
      }"
      v-if="componentType === 'MONEY'"
    >
      <a-input-number
        :min="1"
        :placeholder="getProps?.placeholder"
        :max-length="getProps?.textMax"
        show-word-limit
        auto-size
        allow-clear
        v-model="oneValue"
      >
        <template #append>
          <a-select
            :style="{
              width: '100px',
            }"
            placeholder="人民币"
          >
            <a-option>￥</a-option>
            <a-option>$</a-option>
          </a-select>
        </template>
      </a-input-number>
    </div>

    <!-- 日期选择 -->
    <a-date-picker
      :style="{
        width: '100%',
      }"
      v-if="componentType === 'DATE'"
      :show-time="getProps.showTime"
      :format="getProps.dateFormat"
      v-model="oneValue"
      :value-format="getProps.valueFormat"
      :disabled="disabled"
    />

    <!-- 日期范围选择 -->
    <a-range-picker
      :style="{
        width: '100%',
      }"
      v-if="componentType === 'DATE_RANGE'"
      :show-time="getProps.showTime"
      :format="getProps.dateFormat"
      v-model="oneValue"
      :value-format="getProps.valueFormat"
      :disabled="disabled"
    />
    <!-- 下拉选择 -->
    <a-select v-model="oneValue" v-if="componentType === 'SELECT'">
      <a-option
        v-for="(option, index) in getProps.selectOptions"
        :key="index"
        >{{ option.label }}</a-option
      >
    </a-select>
    <!-- 单选框 -->
    <a-radio-group v-model="oneValue" v-if="componentType === 'RADIO'">
      <a-radio
        v-for="item in getProps.radioOptions"
        :key="item.value"
        :value="item.value"
        >{{ item.label }}</a-radio
      >
    </a-radio-group>

    <!-- 多选框 -->
    <a-checkbox-group
      :max="getProps.max"
      v-if="componentType === 'CHECK_BOX'"
      v-model="checkGroupValue"
    >
      <a-checkbox
        v-for="checkItem in getProps.options"
        :key="checkItem.value"
        :value="checkItem.value"
        >{{ checkItem.label }}</a-checkbox
      >
    </a-checkbox-group>

    <!-- 上传文件 -->
    <upload
      v-if="componentType === 'FILE'"
      v-model:props="getProps"
      :disabled="disabled"
      v-model:values="values"
      @setUpload="setUpload"
    />
    <!-- table表格 -->
    <!-- support from v2.25.0  -->
    <procurementTable
      v-if="componentType === 'TABLE'"
      v-model:props="getProps"
      v-model:values="values"
      :disabled="disabled"
    />
    <!-- 交货要求动态控件 -->
    <deliveryRequirementsBC
      v-if="componentType === 'DELIVERY_REQUIREMENTS_BC'"
      v-model:props="getProps"
      v-model:values="values"
      :disabled="disabled"
    ></deliveryRequirementsBC>
    <!-- 产品 -->
    <!-- <procutionBC
      v-if="componentType === 'PRODUCTION_BC'"
      v-model:props="getProps"
      v-model:values="values"
      :disabled="disabled"
    >
    </procutionBC> -->
    <!-- 产品明细
    <productDetail
      v-if="componentType === 'PRODUCT_DETAIL'"
      v-model:props="getProps"
      v-model:values="values"
      :disabled="disabled"
    >
    </productDetail> -->
    <!-- 部门控件 -->
    <Department
      v-if="componentType === 'DEPARTMENT'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    ></Department>
    <!-- 岗位控件 -->
    <Post
      v-if="componentType === 'POST'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    ></Post>
    <!-- 客户名称 -->
    <Client
      v-if="componentType === 'CLIENT'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    ></Client>
    <!-- 客户编号 -->
    <clientNumber
      v-if="componentType === 'CLIENT_NUMBER'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    ></clientNumber>
    <!-- 联系人姓名 -->
    <contactName
      v-if="componentType === 'CONTACT_NAME'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    ></contactName>
    <!-- 电话 -->
    <clientPhone
      v-if="componentType === 'CONTACT-NUMBER'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    ></clientPhone>
    <!-- 联系地址 -->
    <clientAddress
      v-if="componentType === 'ADDRESS'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    ></clientAddress>
    <!-- 订单编号 -->
    <orderNumber
      v-if="componentType === 'ORDER_NUMBER'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    ></orderNumber>
    <!-- 合同编号 -->
    <contractNumber
      v-if="componentType === 'CONTRACT_NUMBER'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    >
    </contractNumber>
    <!-- 我方签约主体 -->
    <company
      v-if="componentType === 'COMPANY'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    ></company>
    <!-- 业务跟单 -->
    <businessCopying
      v-if="componentType === 'BUSINESS_COPYING'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    ></businessCopying>
    <!-- 业务经理 -->
    <businessManager
      v-if="componentType === 'BUSINESS_MANAGER'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    >
    </businessManager>
    <!-- 签约日期 -->
    <agencyDate
      v-if="componentType === 'AGENCY_DATE'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    ></agencyDate>
    <!-- 结束日期 -->
    <endDate
      v-if="componentType === 'END_DATE'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    ></endDate>
    <!-- 合同总金额 -->
    <contractTotal
      v-if="componentType === 'CONTRACT_TOTAL'"
      v-model:props="getProps"
      v-model:values="checkGroupValue"
      :disabled="disabled"
    ></contractTotal>

    <!-- 合同内容 -->
    <contractContent
      v-if="componentType === 'CONTRACT_CONTENT'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    ></contractContent>

    <!-- 合同付款方式 -->
    <contractPayment
      v-if="componentType === 'CONTRACT_PAYMENT'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    >
    </contractPayment>
    <!-- 发票类型 -->
    <invoiceType
      v-if="componentType === 'INVOICE_TYPE'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <!-- 发票税率 -->
    <invoiceRate
      v-if="componentType === 'INVOICE_RATE'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <!-- 单位抬头 -->
    <companyTitle
      v-if="componentType === 'COMPANY_TITLE'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <!-- 纳税人识别号 -->
    <taxpayerIdentificationNumber
      v-if="componentType === 'TAXPAYER_IDENTIFICATION_NUMBER'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <!-- 开户行 -->
    <accountBank
      v-if="componentType === 'ACCOUNT_BANK'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <!-- 单位地址 -->
    <unitAddress
      v-if="componentType === 'UNIT_ADDRESS'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <!-- 发票备注 -->
    <invoiceRemark
      v-if="componentType === 'INVOICE_REMARK'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <!-- 收款账户 -->
    <receivingAccount
      v-if="componentType === 'RECEIVING_ACCOUNT'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <!-- 付款方式 -->
    <paymentMethod
      v-if="componentType === 'PAYMENT_METHOD'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <!-- 付款明细 -->
    <paymentDetails
      v-if="componentType === 'PAYMENT_DETAILS'"
      v-model:props="getProps"
      v-model:values="values"
      :disabled="disabled"
    />
    <!-- 关联合同 -->
    <ContractSelect
      v-if="componentType === 'CONTRACT_SELECT'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <!-- 关联审批 -->
    <FlowSelect
      v-if="componentType === 'FLOW_SELECT'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <!-- 订单日期 -->
    <orderTime
      v-if="componentType === 'ORDER_TIME'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <!-- 创建人 -->
    <CreatedDy
      v-if="componentType === 'CREATED_DY'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :initialize="initialize"
      :disabled="disabled"
    />
    <!-- 申请部门 -->
    <ApplyDept
      v-if="componentType === 'APPLY_DEPT'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <applyTimeVue
      v-if="componentType === 'APPLY_DATE'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <applyCause
      v-if="componentType === 'APPLY_CAUSE'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <applyDetailed
      v-if="componentType === 'APPLY_DETAILED'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <SupplierName
      v-if="componentType === 'SUOOLIER-NAME'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <SupplierNumber
      v-if="componentType === 'SUOOLIER-NUMBER'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <Email
      v-if="componentType === 'E-MAIL'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <ContactAddress
      v-if="componentType === 'CONTACT-ADDRESS'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <Buyer
      v-if="componentType === 'BUYER'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <BuyPhone
      v-if="componentType === 'BUY-PHONE'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <BuyDetailed
      v-model:props="getProps"
      v-model:values="values"
      v-if="componentType === 'BUY-DETAILED'"
      :disabled="disabled"
    />
    <TotalAmount
      v-if="componentType === 'BUY-TOTAL-AMOUNT'"
      v-model:props="getProps"
      v-model:oneValue="oneValue"
      :disabled="disabled"
    />
    <!-- 采购明细 -->
    <buyPlanDetais
      v-if="componentType === 'BUY-PLAN-DETAILS'"
      v-model:props="getProps"
      v-model:values="values"
      :disabled="disabled"
    />
  </a-form-item>
</template>

<script setup lang="ts">
  import { computed, ref, reactive, watchEffect } from 'vue';
  import deliveryRequirementsBC from './components/bussiness-control/delivery-requirements/index.vue';
  import procutionBC from './components/bussiness-control/production/index.vue';
  import productDetail from './components/order/procurement-table.vue';
  import clientNumber from './components/client/number.vue';
  import contactName from './components/client/contact-name.vue';
  import clientPhone from './components/client/phone.vue';
  import clientAddress from './components/client/address.vue';
  import orderNumber from './components/order-number/index.vue';
  import company from './components/contract/company.vue';
  import contractNumber from './components/contract/contract-number.vue';
  import businessCopying from './components/contract/business-copying.vue';
  import agencyDate from './components/contract/agency-date.vue';
  import endDate from './components/contract/end-date.vue';
  import contractTotal from './components/contract/contract-total.vue';
  import contractContent from './components/contract/contract-content.vue';
  import contractPayment from './components/contract/contract-payment-method.vue';
  import invoiceType from './components/client/invoice-type.vue';
  import invoiceRate from './components/client/invoice-rate.vue';
  import companyTitle from './components/client/company-title.vue';
  import taxpayerIdentificationNumber from './components/client/taxpayer-identification-number.vue';
  import accountBank from './components/client/account-bank.vue';
  import unitAddress from './components/client/unit-address.vue';
  import invoiceRemark from './components/client/invoice-remark.vue';
  import receivingAccount from './components/client/receiving-account.vue';
  import procurementTable from './components/order/procurement-table.vue';
  import paymentMethod from './components/order/payment-method.vue';
  import paymentDetails from './components/order/payment-details.vue';
  import upload from './components/base/upload.vue';
  import ContractSelect from './components/contract/contract-select.vue';
  import FlowSelect from './components/contract/flow-select.vue';

  import orderTime from './components/order/order-time.vue';
  import CreatedDy from './components/buy/createddy.vue';
  import ApplyDept from './components/buy/applyDept.vue';
  import applyTimeVue from './components/buy/applytime.vue';
  import applyCause from './components/buy/applycause.vue';
  import applyDetailed from './components/buy/applydetailed.vue';
  import SupplierName from './components/buy/Suppliername.vue';
  import SupplierNumber from './components/buy/SupplierNumber.vue';
  import Email from './components/buy/e-mail.vue';
  import ContactAddress from './components/buy/contactAddress.vue';
  import Buyer from './components/buy/buyer.vue';
  import BuyPhone from './components/buy/buyphone.vue';
  import TotalAmount from './components/buy/totalamount.vue';
  import businessManager from './components/contract/business-manager.vue';
  import buyPlanDetais from './components/buy/buy-plan-detais.vue';

  let props = withDefaults(
    //参数说明
    defineProps<{
      componentType: string;
      props: { [propName: string]: any };
      name: string;
      required: boolean | number;
      values: any;
      disabled?: boolean;
      initialize?: boolean;
      regex?: {
        [name: string]: {
          role: any;
          name: any;
        };
      };
    }>(),
    {
      disabled: false,
    }
  );

  const emit = defineEmits(['update:values', 'update:props']);
  //复制一份props
  const getProps = computed(() => props.props);

  const validator = (value: any, callback: any) => {
    const { componentType, name, values, required, regex } = props;
    //必填判断
    if (required === true || required === 1) {
      //输入类判断
      if (
        [
          'TEXT',
          'E-MAIL',
          'TEXT_AREA',
          'NUMBER',
          'BUY_APPLYNAME',
          'APPLY_CAUSE',
          'CONTRACT_NUMBER',
          'ORDER_NUMBER',
          'INVOICE_REMARK',
          'CONTRACT_CONTENT',
          'CONTRACT_PAYMENT',
        ].includes(componentType + '') &&
        !values[0]
      )
        return callback('请输入' + name);

      //选择类判断
      if (
        [
          'DATE',
          'DATE_RANGE',
          'POST',
          'CLIENT',
          'BUSINESS_MANAGER',
          'CONTRACT_SELECT',
          'PAYMENT_METHOD',
          'RECEIVING_ACCOUNT',
          'INVOICE_TYPE',
          'AGENCY_DATE',
          'DEPARTMENT',
          'BUSINESS_COPYING',
          'COMPANY',
          'END_DATE',
          'BUYER',
          'SUOOLIER-NUMBER',
        ].includes(componentType + '') &&
        !values[0]
      )
        return callback('请选择' + name);

      if (componentType === 'APPLY_DETAILED' && !props.props.data?.length) {
        return callback('请选择' + name);
      }
      if (componentType === 'FILE' && !props.props.data?.length) {
        console.log(value, props);
        return callback('请添加' + name);
      }
      // if (componentType === 'PRODUCTION_BC') { //这个控件有bug values不是数组
      //   return callback('请选择' + name);
      // }

      if (componentType === 'PRODUCT_DETAIL' && !props.props.data[0]?.name) {
        return callback('请选择' + name);
      }

      if (componentType === 'TABLE' && !props.props.data[0]?.name)
        return callback('请选择' + name);

      if (componentType === 'PAYMENT_DETAILS' && !props.props.data?.length)
        return callback('请填写' + name);

      if (componentType === 'CONTRACT_TOTAL') {
        let [val1, val2] = values;
        if (!val1 || !val2) {
          return callback(val2 ? '请填写价格' : '请选择单位');
        }
      }

      if (componentType === 'BUY-DETAILED' && !props.props.data[0]?.id) {
        return callback('请选择' + name);
      }
    }

    if (componentType === 'TEXT') {
      //单行输入框
      const { validate } = getProps.value;
      if (!validate) return callback();
      if (regex) {
        const roleItem = regex[validate];
        const checkVal = roleItem.role.test(values[0]);
        if (!checkVal) {
          return callback(new Error('请输入正确的' + roleItem.name));
        }
      }
    }
    callback();
  };
  //当value只用到第一个绑定这个参数
  const oneValue = computed({
    get() {
      return props.values?.length ? props.values[0] : '';
    },
    set(val) {
      emit('update:values', [val]);
    },
  });

  const setUpload = (val: any) => {
    emit('update:props', val);
  };

  // 多选双向绑定
  const checkGroupValue = computed({
    get() {
      return props.values;
    },
    set(val) {
      emit('update:values', val);
    },
  });
</script>

<style></style>
